<template>
  <div class="qrcode-box">
    <div class="qrcode-poster">
      <div class="qrcode-title">
        <el-image :src="qrTitle"></el-image>
      </div>
      <div class="qrcode-invite">
        <div>
          <span>小葱</span>
          &ensp;
          <span>邀请您加入</span>
        </div>
        <div>中国</div>
      </div>
      <div class="qrcode-container">
        <VueQr
          class="qrcode-item"
          :margin="config.margin"
          :size="config.size"
          :text="config.text"
          :logoSrc="config.logoSrc"
          :correctLevel="config.correctLevel"
          :title="config.text"></VueQr>
      </div>
      <div class="qrcode-text">扫码二维码加入企业</div>
    </div>
    <div class="btns">
      <el-button @click="downloadPoster" type="primary">下载二维码</el-button>
      <el-button @click="changeToCanvas" type="primary">图片转为canvas</el-button>
    </div>
  </div>
</template>

<script>
import VueQr from 'vue-qr';
import html2canvas from 'html2canvas';
export default {
  name: 'qrcodePoster',
  data() {
    return {
      qrTitle: require('@/assets/imgs/qrcode/qrcode-title.png'),
      config: {
        text: 'https://xfbapp-sit.nbcb.com.cn:3800/xfb-base-mb/#/invitePage?userId=1894196439572058112&corpId=1894196904758120448&orgId=0&scene=invite',
        logoSrc: require('@/assets/imgs/qrcode/qrcode-logo.png'),
        size: 248,
        margin: 0,
        correctLevel: 3
      }
    };
  },
  components: {
    VueQr
  },
  methods: {
    async downloadPoster() {
      let element = document.querySelector('.qrcode-poster');
      let canvas = await html2canvas(element);
      let posterUrl = canvas.toDataURL();
      this.downloadImg(posterUrl, '员工邀请码海报.png');
    },
    downloadImg(url, name) {
      const alink = document.createElement('a');
      alink.setAttribute('href', url);
      alink.download = name;
      alink.click();
    },
    // 以下想尝试，目前失败(放大canvas不模糊)
    /**
     * vue-qr被解析为一个img标签
     * 将img转化为canvas
     * canvas可以设置：原始尺寸 = 样式尺寸 * window.devicePixelRatio; 这样可以保持清晰度
     * 原始尺寸为canvas.width和canvas.height
     * 然后监听resize事件动态设置原始尺寸
     */
    async changeToCanvas() {
      let element = document.querySelector('.qrcode-poster');
      let canvas = await html2canvas(element);
      let parent = document.querySelector('.qrcode-box');
      parent.insertBefore(canvas, parent.children[0]);
      element.remove();
      window.addEventListener('resize', this.resize.bind(this, canvas));
    },
    resize(canvas) {
      let ctx = canvas.getContext('2d');
      let canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height); // 保存画布
      canvas.width = 300 * window.devicePixelRatio;
      canvas.height = 600 * window.devicePixelRatio;
      canvas.style.backgroundColor = 'lime';
      ctx.putImageData(canvasData, 0, 0); //  改变完宽高后，重绘画布
    }
  }
};
</script>

<style lang="scss" scoped>
.qrcode-box {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .qrcode-poster {
    width: 300px;
    height: 600px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    background-image: linear-gradient(25deg, rgb(0, 102, 174), rgb(143, 95, 139), rgb(204, 82, 103), rgb(255, 54, 67));
    .qrcode-title {
      width: 143px;
      height: 47px;
      margin: 40px auto;
    }
    .qrcode-invite {
      text-align: center;
      & > div:nth-child(1) {
        margin-bottom: 20px;
        & > span:nth-child(1) {
          font-weight: bold;
        }
      }
      & > div:nth-child(2) {
        font-weight: bold;
        margin-bottom: 20px;
      }
    }
    .qrcode-container {
      width: 280px;
      height: 280px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      background: url('~@/assets/imgs/qrcode/qrcode-border-bg.png') no-repeat center center;
      .qrcode-item {
        margin: auto;
      }
    }
    .qrcode-text {
      color: #999;
      font-size: 14px;
      text-align: center;
    }
  }
  .btns {
    margin-top: 20px;
  }
}
</style>
